<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          back-text=""
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#D2EEEE' : '#D2EEEE' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 钱包 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[.875rem] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="bg-[#D2EEEE] p-4">
        <view class="flex justify-between items-center">
          <view class="flex flex-col">
            <view class="text-[.8125rem] text-[#5C6068]"> 我的钓钻 </view>
            <view class="text-[1.25rem] text-[#161A24] font-medium"> {{ data.diamond }} </view>
          </view>
          <view
            class="w-[4.625rem] h-[2rem] bg-[#00A9AB] flex justify-center items-center rounded-full"
            @click="goRecharge"
          >
            <view class="text-[.875rem] text-[#FFFFFF] font-medium">去充值</view>
          </view>
        </view>
      </view>
      <view class="flex flex-col gap-3 p-4 rounded-[1.25rem_1.25rem_0rem_0rem] -mt-2 bg-[#F4F6F8]">
        <view class="bg-[#FFFFFF] rounded-[.5rem] px-4 py-2 flex items-center gap-3" v-if="!vk.pubfn.isNull(notices)">
          <view class="flex gap-1 items-center">
            <view class="size-6 flex-none rounded-full">
              <image src="/static/dddr3.png" mode="aspectFill" class="size-full" />
            </view>
            <view class="text-[.875rem] text-[#161A24] font-bold"> 通知 </view>
          </view>
          <view class="text-[.8125rem] text-[#161A24] flex-1 line-clamp-1">
            <u-notice-bar
              mode="horizontal"
              :list="vk.pubfn.isNull(notices) ? ['暂无通知'] : notices"
              padding="[0, 0]"
              color="#161A24"
              bg-color="transparent"
            ></u-notice-bar>
          </view>
        </view>
        <view class="bg-[#FFFFFF] rounded-[.75rem] p-4 flex flex-col gap-2">
          <view class="text-[.875rem] text-[#5C6068]"> 当前余额(元)</view>
          <view class="flex justify-between items-baseline mt-2">
            <view class="text-[#161A24] text-[2rem] font-medium">{{ data.normal_amount }}</view>

            <view @click="goWithdrawMoney" class="py-1 pl-8">
              <image src="/static/dddr58.png" class="size-5" mode="aspectFill" />
            </view>
          </view>
          <u-line />

          <view class="grid grid-cols-2">
            <view
              class="flex flex-col text-[.875rem] text-[#5C6068] gap-1"
              @click="vk.navigateTo('/pages/my/estimatedRevenue')"
            >
              <view class="flex gap-2 items-center">
                <view> 预估收益(元) </view>
                <image src="/static/dddr58.png" class="size-[1.125rem]" mode="aspectFill" />
              </view>
              <view>{{ data.expect_amount }}</view>
            </view>
            <view class="flex flex-col text-[.875rem] text-[#5C6068] gap-1">
              <view>累计收益(元)</view>
              <view>{{ data.get_amount }}</view>
            </view>
          </view>
        </view>

        <view class="flex flex-col gap-1 mt-3">
          <view class="text-[.875rem] text-[#5C6068] font-medium">注意事项：</view>
          <u-parse :html="content" class="text-[.75rem] text-[#8E9299]"></u-parse>
        </view>
      </view>
    </yy-paging>
    <u-popup v-model="show" mode="bottom" border-radius="16">
      <view class="flex flex-col">
        <view class="flex justify-between items-center px-4 pt-4 pb-2">
          <view class="text-[1.25rem] text-[#161A24]"> 绑定支付宝 </view>
          <image src="/static/dddr16.png" @click="show = false" class="size-6" mode="aspectFill" />
        </view>
        <u-line />

        <view class="flex flex-col justify-center items-center py-7">
          <view class="w-[3.5rem] h-[3.5rem] rounded-full">
            <image src="/static/dddr28.png" class="size-full" mode="aspectFill" />
          </view>
          <view class="text-[.875rem] text-[#5C6068] mt-5 text-center w-2/3">
            绑定支付宝账号才可以进行提现，只需绑定一次，后续均可提现至该支付宝账号
          </view>
          <view
            class="w-2/3 h-[2.75rem] bg-[#00A9AB] rounded-full flex items-center justify-center mt-8"
            @click="goBindPayment"
          >
            <view class="text-[1rem] text-[#FFFFFF] font-bold"> 去绑定</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        show: false, // 是否显示操作菜单
        list: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'], // 操作菜单列表
        data: {}, // 数据
        content: '',
        notices: [] // 内容
      }
    },
    onLoad(options) {},
    onShow() {
      this.wallet()
    },

    methods: {
      goRecharge() {
        vk.navigateTo({
          url: '/pages/my/recharge',
          events: {
            update: data => {
              this.wallet()
            }
          }
        })
      },
      async wallet() {
        const res = await api.wallet()
        this.data = res.data
        this.notices = res.data.notices.map(e => e.content)

        // 将接口返回的tips字符串中的\n替换为<br/>标签实现换行
        this.content = res.data.tips.replace(/\n/g, '<br/>')
      },
      goBindPayment() {
        vk.navigateTo({
          url: '/pages/my/bindAlipay',
          success: res => {
            this.show = false
          }
        })
      },
      async goWithdrawMoney() {
        let res = await api.getWithdrawalAccount()
        if (vk.pubfn.isNull(res.data)) {
          this.show = true
        } else {
          vk.navigateTo({
            url: '/pages/my/withdrawal'
          })
        }
      },

      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([''])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
